<template>
    <div>
        <el-card class="!border-none" shadow="never">
            <el-page-header content="机构详情" @back="$router.back()" />
        </el-card>
        <el-card class="mt-4 !border-none" header="基本资料" shadow="never">
            <el-form ref="formRef" class="ls-form" :model="formData" label-width="120px">

                <el-form-item label="机构头像：">
                    <material-picker v-model="formData.avatar" :limit="1" @change="handleChange(formData.avatar)" />
                </el-form-item>
                <el-form-item label="机构编号：">
                    {{ formData.sn }}
                </el-form-item>
                <el-form-item label="机构昵称：">
                    {{ formData.nickname }}
                    <popover-input class="ml-[10px]" @confirm="handleEdit($event, 'nickname')" :limit="32">
                        <el-button type="primary" link v-perms="['user:edit']">
                            <icon name="el-icon-EditPen" />
                        </el-button>
                    </popover-input>
                </el-form-item>
                <el-form-item label="账号：">
                    {{ formData.account }}
                    <popover-input class="ml-[10px]" @confirm="handleEdit($event, 'account')" :limit="32">
                        <el-button type="primary" link v-perms="['user:edit']">
                            <icon name="el-icon-EditPen" />
                        </el-button>
                    </popover-input>
                </el-form-item>
                <!-- 密码 -->
                <el-form-item label="密码">
                    <el-popover placement="top" width="300px" trigger="click" v-model:visible="visiblePs">
                        <div class="flex" @click.stop="">
                            <div class="popover-input__input mr-[10px] flex-1">
                                <el-input v-model.trim="inputValuePs" :maxlength="80" :show-word-limit="false"
                                    type="password" size="default" clearable placeholder="请输入密码" />
                                <el-input v-model.trim="inputValuePsRe" :maxlength="80" :show-word-limit="false"
                                    type="password" size="default" clearable placeholder="请再次输入密码" />
                            </div>
                            <div class="popover-input__btns flex-none">
                                <el-button link @click="closePs">取消</el-button>
                                <el-button type="primary" size="default" @click="handleConfirmPs">确定</el-button>
                            </div>
                        </div>
                        <template #reference>
                            <div class="inline" @click.stop="handleOpenPs">
                                <el-button type="primary" link v-perms="['user:edit']">
                                    <icon name="el-icon-EditPen" />
                                </el-button>
                            </div>
                        </template>
                    </el-popover>
                </el-form-item>
                <el-form-item label="负责人姓名：">
                    {{ formData.real_name || "-" }}
                    <popover-input class="ml-[10px]" @confirm="handleEdit($event, 'real_name')" :limit="32">
                        <el-button type="primary" link v-perms="['user:edit']">
                            <icon name="el-icon-EditPen" />
                        </el-button>
                    </popover-input>
                </el-form-item>



                <el-form-item label="负责人电话：">
                    {{ formData.mobile || "-" }}
                    <popover-input class="ml-[10px]" type="number" @confirm="handleEdit($event, 'mobile')">
                        <el-button type="primary" link v-perms="['user:edit']">
                            <icon name="el-icon-EditPen" />
                        </el-button>
                    </popover-input>
                </el-form-item>
                <el-form-item label="服务到期时间：">
                    {{ formData.end_time }}
                    <el-popover placement="right" :width="400" trigger="click">
                        <template #reference>
                            <el-button type="primary" link v-perms="['user:edit']">
                                <icon name="el-icon-EditPen" />
                            </el-button>
                        </template>
                        <el-date-picker v-model="formData.end_time" type="datetime" placeholder="选择日期和时间"
                            value-format="YYYY-MM-DD HH:mm:ss" :shortcuts="shortcuts"
                            @change="handleEdit($event, 'end_time')" />
                    </el-popover>
                    <el-alert description="默认不填为永久" type="info" :closable="false" />
                </el-form-item>
                <el-form-item label="启用状态:">
                    <el-switch v-model="formData.is_webset" inline-prompt width="100" :active-value="'开'"
                        :inactive-value="'关'" active-text="开" inactive-text="关"
                        @click="changerqcc(formData.is_webset)" />

                </el-form-item>
                <el-form-item label="注册时间：">
                    {{ formData.create_time }}
                </el-form-item>
                <el-form-item label="最近登录时间：">
                    {{ formData.login_time }}
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>

<script lang="ts" setup name="consumerDetail">
import type { FormInstance, ElMessage } from "element-plus";
import { getUserDetail, userEdit } from "@/api/consumer";
import { isEmpty } from "@/utils/util";
const visiblePs = ref(false);
const inputValuePs = ref("");
const inputValuePsRe = ref("");
const closePs = () => {
    visiblePs.value = false;
};
const handleConfirmPs = async () => {
    if (inputValuePs.value == "") {
        ElMessage.error("密码, 密码不能为空.");
        return false;
    }
    if (inputValuePs.value != inputValuePsRe.value) {
        ElMessage.error("确认密码, 密码两次不一致.");
        return false;
    }
    await userEdit({
        id: route.query.id,
        field: "password",
        value: inputValuePs.value,
    });
    inputValuePs.value = ''
    inputValuePsRe.value = ''
    getDetails();
    closePs();
};
const changer = async (open: string) => {
    if (open == '开') {
        await userEdit({ field: "is_webset", id: route.query.id, value: 1 })
    } else {
        await userEdit({ field: "is_webset", id: route.query.id, value: 0 })
    }
}
const changerqyvx = async (open: string) => {
    if (open == '开') {
        await userEdit({ field: "is_workwechat", id: route.query.id, value: 1 })
    } else {
        await userEdit({ field: "is_workwechat", id: route.query.id, value: 0 })
    }
}
const changerqcc = async (open: string) => {
    if (open == '开') {
        await userEdit({ field: "is_webset", id: route.query.id, value: 1 })
    } else {
        await userEdit({ field: "is_webset", id: route.query.id, value: 0 })
    }
}
const changered = async (open: string) => {
    if (open == '开') {
        await userEdit({ field: "is_douyin", id: route.query.id, value: 1 })
    } else {
        await userEdit({ field: "is_douyin", id: route.query.id, value: 0 })
    }
}
const changeStatus = async (open: string) => {
    if (open == '开') {
        await userEdit({ field: "copyright_switch", id: route.query.id, value: 1 })
    } else {
        await userEdit({ field: "copyright_switch", id: route.query.id, value: 0 })
    }
}
const changeS = async (open: string) => {
    if (open == '开') {
        await userEdit({ field: "is_wechat", id: route.query.id, value: 1 })
    } else {
        await userEdit({ field: "is_wechat", id: route.query.id, value: 0 })
    }
}
const change = async (open: string) => {
    if (open == '开') {
        await userEdit({ field: "tp_storage", id: route.query.id, value: 1 })
    } else {
        await userEdit({ field: "tp_storage", id: route.query.id, value: 0 })
    }
}
const changeHandler = async (open: string) => {
    if (open == '开') {
        await userEdit({ field: "is_tify", id: route.query.id, value: 1 })
    } else {
        await userEdit({ field: "is_tify", id: route.query.id, value: 0 })
    }
}
const changed = async (open: string) => {
    if (open == '开') {
        await userEdit({ field: "is_vxservice", id: route.query.id, value: 1 })
    } else {
        await userEdit({ field: "is_vxservice", id: route.query.id, value: 0 })
    }
}
const changeding = async (open: string) => {
    if (open == '开') {
        await userEdit({ field: "is_zfbservice", id: route.query.id, value: 1 })
    } else {
        await userEdit({ field: "is_zfbservice", id: route.query.id, value: 0 })
    }
}
const handleOpenPs = () => {
    visiblePs.value = true;
};
const shortcuts = [
    {
        text: "今天",
        value: new Date(),
    },
    {
        text: "昨天",
        value: () => {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24);
            return date;
        },
    },
    {
        text: "一周前",
        value: () => {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
            return date;
        },
    },
];
const route = useRoute();
const formData = reactive({
    avatar: "",
    channel: "",
    create_time: "",
    login_time: "",
    mobile: "",
    nickname: "",
    real_name: 0,
    sex: 0,
    copyright_switch: "",
    tp_storage: "",
    sn: "",
    account: "",
    end_time: "",
    password: "",
    password_confirm: "",
    is_wechat: "",
    is_tify: "",
    is_vxservice: "",
    is_webset: "",
    is_zfbservice: "",
    is_douyin: ""
});

const formRef = shallowRef<FormInstance>();

const getDetails = async () => {
    const data = await getUserDetail({
        id: route.query.id,
    });
    Object.keys(formData).forEach((key) => {
        //@ts-ignore
        formData[key] = data[key];
    });
};

const handleChange = async (params: type) => {
    if (params == null || params == "undefined" || params == "") {
        params = ""
    }
    await userEdit({
        id: route.query.id,
        field: "avatar",
        value: params,
    });
    getDetails();
}
const handleEdit = async (value: string, field: string) => {
    if (value == null || value == "undefined") {
        value = ""
    }
    await userEdit({
        id: route.query.id,
        field,
        value,
    });
    getDetails();
};

getDetails();
</script>
